<template>
  <div>
    <el-dialog
      title="专项卡售卖"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowModal"
      width="600px"
      @close="closeDrawer"
    >
      <el-form
        ref="form"
        :model="param"
        :rules="rules"
        label-width="100px"
        label-suffix="："
      >
        <el-form-item label="用户信息" prop="memberId">
          <div>
            <MemberSearch
              ref="memberSearchRef"
              @clear="MemberClear"
              @select="MemberSelect"
            />
          </div>
        </el-form-item>
        <el-form-item label="专项卡" prop="specialCardId">
          <el-select
            v-model="param.specialCardId"
            filterable
            style="width: 100%"
            @change="getspecialCardDetail"
          >
            <el-option
              v-for="item in specialCardList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="specialCardInfo && specialCardInfo.id">
          <div class="cardInfo_wrap">
            <div class="item">
              <span>销售价格：</span>
              <span class="red">¥{{ specialCardInfo.price }}</span>
            </div>
            <div class="item">
              <span>销售情况：</span>
              <span
                style="color: #e89f42"
              >{{ specialCardInfo.sellNum || "0" }}
                <span v-if="!specialCardInfo.circulationAll">张</span></span>
              <span>/{{ specialCardInfo.circulationAll || "不限" }}</span>
              <span v-if="specialCardInfo.circulationAll">张</span>
            </div>
            <div class="item">
              <span>卡内本金：</span>
              <span
                class="primaryColor"
              >{{ specialCardInfo.cardPrice }}元</span>
              <span>，有效期{{
                specialCardInfo.validTimeType == "1"
                  ? "长期有效"
                  : `${specialCardInfo.validTime}天`
              }}</span>
            </div>
            <div class="item">
              <span>赠送金额：</span>
              <span>{{
                specialCardInfo.isGive == "0"
                  ? "不赠送"
                  : `金额${specialCardInfo.givePrice}元，有效期${
                    specialCardInfo.givePriceValidTime || "0"
                  }天`
              }}</span>
            </div>
            <div class="item">
              <span>适用场景：</span>
              <span>{{ specialCardInfo.useOrderTypeName }}</span>
            </div>
            <div class="red item">详细适用场景详见专项卡详情</div>
          </div>
        </el-form-item>
        <el-form-item label="购买数量" prop="num">
          <el-input-number v-model="param.num" :min="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDrawer2">取消</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit"
        >确认</el-button>
      </div>
    </el-dialog>
    <orderDialog
      v-if="isShowOrder"
      ref="orderRef"
      @studentAddSuccess="isShowModal = false"
      @orderSuccess="orderSuccess"
      @openSuccess="subLoading = false"
    />
  </div>
</template>

<script>
import MemberSearch from '@/components/MemberSearch'
import orderDialog from '@/components/order'
import { specialCardSaleList, specialCardBuy } from '@/api'
export default {
  components: {
    MemberSearch,
    orderDialog
  },
  data() {
    return {
      subLoading: false,
      isShowModal: false,
      isShowOrder: false,
      modalDialog: this.$store.getters.dialog,
      rules: {
        num: [{ required: true, message: '请输入', trigger: 'blur' }],
        memberId: [{ required: true, message: '请选择会员', trigger: 'change' }],
        specialCardId: [{ required: true, message: '请选择专项卡', trigger: 'change' }]
      },
      param: {
        num: 1
      },
      specialCardList: [],
      specialCardInfo: {}

    }
  },
  created() {
    this.getspecialCardSaleList()
  },
  methods: {
    onSubmit() {
      const { param } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          specialCardBuy({ param }).then(res => {
            if (res.errorCode !== '000000') return
            this.isShowOrder = true
            this.$nextTick(() => {
              this.subLoading = true
              try {
                this.$refs.orderRef.continuePay({ ...param, ...res.record }, 'specialCardBuy')
              } catch (error) {
                this.subLoading = false
              }
              setTimeout(() => {
                this.subLoading = false
              }, 3000)
            })
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    getspecialCardSaleList() {
      specialCardSaleList({ param: {}}).then(res => {
        this.specialCardList = res.recordList
      })
    },
    orderSuccess() {
      this.closeDrawer()
      this.isShowOrder = false
    },
    getspecialCardDetail(id) {
      specialCardSaleList({ param: { id, memberId: this.param.memberId }}).then(res => {
        this.specialCardInfo = res.record
      })
    },
    closeDrawer() {
      this.isShowModal = false
      this.param = {
        num: 1
      }
      this.specialCardInfo = {}
      this.$refs['form'].clearValidate()
      this.$refs.memberSearchRef.clear()
      // this.$emit('close')
    },
    closeDrawer2() {
      this.isShowModal = false
      this.$emit('close')
    },
    MemberSelect(item) {
      const fn = () => {
        this.$set(this.param, 'memberId', item.id)
        if (this.param.specialCardId) {
          this.getspecialCardDetail(this.param.specialCardId)
        }
        // this.$set(this.param, 'specialCardId', '')
        // this.specialCardInfo = {}
        this.getspecialCardSaleList()
      }
      fn()
    },
    MemberClear() {
      this.$set(this.param, 'memberId', '')
      this.$set(this.param, 'specialCardId', '')
      this.specialCardInfo = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.cardInfo_wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border-radius: 8px;
  .item {
    width: 100%;
    height: 28px;
    line-height: 28px;
  }
}
</style>

